<template>
  <image :src="decodedSrc" class="img" :mode="mode" />
</template>

<script>
import { computed, watch } from "vue";

const SERVER_IP = "http://localhost:8090";

export default {
  name: "ImgComponent",
  props: {
    src: {
      type: String,
      required: true, // 图片路径必填
    },
    mode: {
      type: String,
      default: "aspectFill", // 默认裁剪模式
    },
  },
  setup(props) {
    // 解码并显示可读中文路径
    const decodeURL = (url) => {
      try {
        return decodeURIComponent(url); // 将 URL 中的乱码解码为中文
      } catch (error) {
        console.error("解码错误:", error);
        return url; // 解码失败返回原始 URL
      }
    };

    // 计算最终的图片路径（替换并解码后）
       const decodedSrc = computed(() => {
         let completeURL;
         if (!props.src.startsWith("http")) {
           // 如果 src 不是完整 URL，则拼接服务器 IP
           completeURL = `${SERVER_IP}${props.src}`;
         } else {
           completeURL = props.src;
         }
   
         // 替换 'profile' 并返回解码后的路径
         return decodeURL(completeURL);
       });

    // 动态监听 src 的变化（可选）
    watch(
      () => props.src,
      (newSrc) => {
        console.log("src 发生了变化:", newSrc);
      }
    );

    return {
      decodedSrc,
    };
  },
};
</script>

<style>
.img {
  width: 100%;
  height: 100%;
}
</style>
